<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="choujiang/icon/iconfont.css">
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 180px;
            height: 240px;
            float: left;
            position: relative;
        }

        .content {
            width: 90%;
            height: 90%;
            border: 2px solid #FFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .box:hover .content {
            border: 2px solid #0c53be;
        }

        .box:hover .content .img-area {
            border-color: #0c53be;
        }

        .content .detail .d-create,
        .content .detail .d-author {
            display: block;
        }

        .content .safe-info .safe .iconfont {
            font-size: .8rem;
            color: #009900;
        }

        .content .safe-info .safe {
            float: right;
            padding-right: 10px;
        }

        .content .safe-info {
            display: block;
            width: 100%;
            float: left;
            height: 20px;
            line-height: 20px;
            font-size: .8rem;
        }

        .content .detail {
            width: 100%;
            height: calc(100% - 165px);
            float: left;
            font-size: .1rem;
            color: #999;
            padding: 4px;
            line-height: 1rem;
        }

        .content .img-area {
            width: 100%;
            height: 100%;
            display: block;
            border: 1px solid #E0E2E4;
        }


        .content .img {
            width: 100%;
            height: 145px;
            float: left;
        }

        .content img {
            width: 100%;
            height: 100%;
        }

        .opt .opt_content .opt_btn:hover {
            color: #0c53be;
        }

        .opt .opt_content .opt_btn {
            width: 40%;
            text-align: center;
            cursor: pointer;
        }


        .opt .opt_content .opt_btn::before {
            display: inline-block;
            content: "";
            height: 100%;
            vertical-align: middle;
        }

        .opt .opt_content {
            height: 30%;
            margin-top: 70%;
            background: #EEE;
            opacity: .5;
            display: flex;
            justify-content: center;
        }

        .opt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(90% - 6px);
            height: calc(90% - 6px);
            z-index: 2;
        }

    </style>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="content">
            <div class="img-area">
                <span class="img">
                    <img src="http://thirdqq.qlogo.cn/g?b=oidb&k=ewCeiar9aaU1SxTaoCvTVjA&s=100&t=1558925595" alt="图片"/>
                </span>
                <span class="safe-info">
                    <span class="safe"><i class="iconfont icon-safe"></i>猿粪认证</span>
                </span>
                <span class="detail">
                    <span class="d-author">本文由: <span class="author">老夫子</span>创建</span>
                    <span class="d-create">创建时间: 2020年12月11日</span>
                </span>
            </div>
        </div>
        <!--<div class="opt">
            <div class="opt_content">
                <span class="opt_btn">View</span>
                <span class="opt_btn">Delete</span>
            </div>
        </div>-->
    </div>


</div>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.5.0/jquery.min.js"></script>
</body>
</html>
